<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <style>
    body{
      display: flex;
    }
    #users{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 200px;
      border: 1px solid red;
      overflow: auto;
    }
    .user{
      height: 50px;
      border: 1px solid rebeccapurple;
      text-align: center;
    }
    #messages{
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 200px;
      right: 0;
      bottom: 100px;
      border: 1px solid green;
      overflow: auto;
    }
    .message{
      width: 200px;
      height: 50px;
      line-height: 50px;
      border-radius: 20px;
      margin: 10px;
      text-align: center;
      background-color: green;
    }
    #messages .self{
      align-self: end;
      background-color: gold;
    }
    #content{
      position: fixed;
      bottom: 0;
      right: 0;
      left: 200px;
      height: 100px;
      border: 1px solid burlywood;
    }
    #submit{
      position: fixed;
      bottom: 20px;
      right: 20px;
      color: green;
    }
  </style>
</head>
<body>
<div id="users">
<!--  <div class="user">用户</div>-->
</div>
<div id="messages">
<!--  <div class="message">用户:消息</div>-->
<!--  <div class="message self">用户:消息</div>-->
</div>
<textarea type="text" id="content"></textarea>
<button onclick="sendMessage()" id="submit">发送</button>
</body>
<script type="text/javascript">
  const usersDiv=document.querySelector("#users");
  const messagesDiv=document.querySelector("#messages");
  const textArea = document.querySelector("#content");

  function sendMessage(){
    const value=textArea.value;
    ws.send(value);
    console.log("value",value);
    textArea.value="";
    const messageDiv=document.createElement("div");
    messageDiv.setAttribute("class","message self");
    messageDiv.innerText=value;
    messagesDiv.appendChild(messageDiv);
  }
  var ws = new WebSocket("ws://176.125.55.233:8080/websocket");

  ws.onopen = function(event) {
    console.log("WebSocket connection opened.");
  };

  ws.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log("Received message from server: " + message.type+","+message.content);
    if (message.type==0){
      const userDiv=document.createElement("div");
      userDiv.setAttribute("class","user");
      userDiv.setAttribute("id",message.content);
      userDiv.innerText=message.content;
      usersDiv.appendChild(userDiv);
    }else if (message.type==1){
      const userDiv=document.querySelector("#"+message.content)
      usersDiv.removeChild(userDiv);
    }else if(message.type==2){
      const messageDiv=document.createElement("div");
      messageDiv.setAttribute("class","message");
      messageDiv.innerText=message.content;
      messagesDiv.appendChild(messageDiv);
    }
  };

  ws.onclose = function(event) {
    console.log("WebSocket connection closed.");
  };

  ws.onerror = function(event) {
    console.log("WebSocket error: " + event);
  };

</script>
</html>
